<template>
	<el-dialog title="预览" :append-to-body="true" :visible.sync="visible" :before-close="close" :close-on-click-modal="false" fullscreen>
      <el-form ref="form" inline>
        <el-form-item size="mini" label="取样件数:">
        	<el-input-number v-model="total"></el-input-number>
        </el-form-item>
        <el-form-item size="mini" label="平均取样量:">
        	<el-input v-model="defaultValue"/>
        </el-form-item>
		<el-form-item size="mini">
			<el-button type="success" v-print="'#check'">打印</el-button>
		</el-form-item>
      </el-form>
	    <div id="check">
        <div v-for="(card,index) in cards">
				<table width="320px" border="1px" style="line-height: 20px;">
          <tr>
            <td colspan="4">取样序号:<u>&nbsp;&nbsp;{{card.boxNum}}&nbsp;&nbsp;</u><h6 style="float: right;">SMP-QA-011-F05-00&nbsp;</h6></td>
          </tr>
          <tr>
            <td colspan="4" style="text-align: center;"><h4>取样证</h4></td>
          </tr>
         <tr>
            <td width="65px">名称:</td>
            <td colspan="3">{{card.productName}}</td>
          </tr>
          <tr>
            <td>批号:</td>
            <td>{{card.batchNum}}</td>
            <td width="50px">总件数:</td>
            <td>{{card.zjs}}</td>
          </tr>
          <tr>
            <td>取样件数:</td>
            <td>{{card.total}}{{card.unitName}}</td>
            <td>取样量:</td>
            <input style="width: 60px;" v-if="card.eidStatus" type="text" placeholder="请输入" @focusout="complete(index)" v-model="diyNum" />
            <td v-else colspan="2" @dblclick="ediOne(index)">{{card.defaultValue}}</td>
          </tr>
          <tr>
            <td>取样日期:</td>
            <td>{{card.getDate}}</td>
            <td>取样人:</td>
            <td></td>
          </tr>
        </table>
        <br />
			</div>
  </div>
	</el-dialog>
</template>

<script>

  import {
  printCard
  } from '@/api/print'

  import {
    CODE_OK
  } from '@/common/js/config'

  export default {
    data() {
      return {
        visible: true,
        total:1,
        defaultValue:0,
        cards:[]
      }
    },
    props: ["childDataForm"],
    created() {
		this.view()
    },
    computed:{
      yfb() {
        if (this.childDataForm.checkTypeName == '原料'
        || this.childDataForm.checkTypeName == '独立请验'
        || this.childDataForm.checkTypeName == '辅料'
        || this.childDataForm.checkTypeName == '包材'
        || this.childDataForm.checkTypeName == '其他') {
          return true
        }
        return false
      },
      zc() {
        if (this.childDataForm.checkTypeName == '中间品'
        || this.childDataForm.checkTypeName == '成品') {
          return true
        }
        return false
      }
    },
    watch:{
      total(val){
        this.view();
      },
      defaultValue(val){
        this.view();
      }
    },
    methods: {
      complete(index){
      	this.cards[index].defaultValue = this.diyNum;
      	this.cards[index].eidStatus = false;
      },
      ediOne(index){
      	this.cards[index].eidStatus = true;
      	this.diyNum = this.cards[index].defaultValue;
      },
      fomatDate(val){
        let getDate = new Date(val);
        return getDate.getFullYear()+"年"+(getDate.getMonth()+1)+"月"+getDate.getDate()+"日"
      },
      view(){
        if (this.yfb) {
          this.childDataForm.content = 'yfb'
        }else if(this.zc){
          this.childDataForm.content = 'zc'
        }
        const params = {
          content: this.childDataForm.content,
          checkId: this.childDataForm.checkId,
          total:this.total,
          defaultValue:this.defaultValue
        }
        printCard(params).then(res => {
          if (res.code === CODE_OK) {
            this.cards = res.cards;
          }
        });
      },
      close() {
        this.visible = false
        this.$emit('close')
      },
      /**
       * 是否为空字符串，全空格也是空字符串
       * @param str
       * @returns {Boolean}
       */
      isBlank(obj) {
        if (obj == null || typeof obj == "undefined" ||
          obj == "") {
          return true;
        }
        return false;
      }
    }
  }
</script>

<style>
</style>
